<template>
	<div class="plugin_list table-theme">
		<head-title title="系统--插件列表"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left">
					<select-view 
						:option-list="statusList" 
						:value="status" 
						placeholder="上下架"
						type="status"
						@value="setSelectValue">
					</select-view>
					<select-view 
						:option-list="orderList" 
						:value="order_by" 
						placeholder="排序方式"
						type="order_by"
						@value="setSelectValue">
					</select-view>
					<select-view 
						v-if="order_by == 'sort'"
						:option-list="ascList" 
						:value="asc" 
						placeholder="升降序"
						type="asc"
						@value="setSelectValue">
					</select-view>
				</div>
				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<search-view :option="optionList" @value="goSearch" @clear="refreshPage"></search-view>
					<div class="add"><el-button type="primary" @click="add">添加</el-button></div>
				</div>
			</div>
			<p class="data-number">总数据数：{{total}}</p>
			<el-table :data="pluginList" border>
				<el-table-column label="ID" align="center" prop="plug_id"></el-table-column>
				<el-table-column label="名称" align="center" prop="name"></el-table-column>
				<el-table-column label="排序" align="center" prop="sort"></el-table-column>
				<el-table-column label="上下架" align="center" width="180">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.is_show" :active-value="1" :inactive-value="2" @change="upDown($event, scope.row.plug_id)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="添加时间" align="center" prop="add_time"></el-table-column>
				<el-table-column label="备注" align="center" prop="brief"></el-table-column>
				<el-table-column label="类型" align="center" prop="type_name"></el-table-column>
				<el-table-column label="操作" align="center" width="180">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages"><el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination></div>
		</el-card>

		<!-- 添加弹框 -->
		<el-dialog :title="title" :visible.sync="addDialog" width="500px" center :modal-append-to-body="false">
			<el-form :model="addForm" :rules="addFormRules" ref="addForm" label-width="120px">
				<el-form-item label="名称:" prop="name"><el-input v-model="addForm.name" placeholder="请输入名称" clearable></el-input></el-form-item>
				<el-form-item label="排序:" prop="sort"><el-input v-model="addForm.sort" placeholder="请输入排序" clearable></el-input></el-form-item>
				<el-form-item label="类型:" prop="type">
					<el-select v-model="addForm.type" placeholder="请选择">
						<el-option v-for="item in typeList" :key="item[0]" :label="item[1]" :value="item[0]"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="备注:"><el-input v-model="addForm.brief" placeholder="请输入备注" type="textarea" :rows="3"></el-input></el-form-item>
				<el-form-item label="上下架:"><el-switch v-model="addForm.is_show" :active-value="1" :inactive-value="2"></el-switch></el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addDialog = false">取 消</el-button>
				<el-button type="primary" @click="submit('addForm')">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import SelectView from '@/components/SelectView';
export default {
	components:{
		SelectView
	},
	data() {
		return {
			order_by: '',
			asc: 1,
			optionList: [
				{
					value: 0,
					label: 'id'
				},
				{
					value: 1,
					label: '插件名字'
				}
			],
			searchContent: '',
			classSelect: '',
			title: '添加',
			submitType: '', // 提交的类型 0 增加 1编辑
			addDialog: false,
			pluginList: [],
			total: 0,totalData: 0, 
			status: 1,
			statusList: [
				{
					value: 1,
					label: '上架'
				},
				{
					value: 2,
					label: '下架'
				}
			],
			orderList: [
				{
					value: 'add_time',
					label: '时间'
				},
				{
					value: 'sort',
					label: '序号'
				}
			],
			ascList: [
				{
					value: 1,
					label: '升序'
				},
				{
					value: 2,
					label: '降序'
				}
			],
			typeList: [],
			page: 0,
			addForm: {
				name: '',
				brief: '',
				is_show: 1,
				sort: 0,
				type: ''
			},
			addFormRules: {
				name: [{ required: true, message: '请输入名称' }],
				sort: [{ required: true, message: '请输入排序' }],
				type: [{ required: true, message: '请选择类型' }]
			}
		};
	},
	methods: {
		// 初始化列表
		init(e) {
			this.pluginList = [];
			this.page = e;
			let data = {
				page: e - 1 ? e - 1 : 0,
				limit: 10,
				is_show: this.status
			};

			if (this.classSelect == 0 && this.searchContent != '') {
				data.plug_id = this.searchContent;
			} else if (this.classSelect == 1 && this.searchContent != '') {
				data.name = this.searchContent;
			}

			if (this.order_by != '') {
				data.order_by = this.order_by;
			}

			if (this.order_by == 'sort') {
				data.asc = this.asc;
			}

			this.$http(this.$ApiList.PluginLists, data).then(res => {
				res.datas.forEach(item => {
					this.typeList.forEach(a => {
						if (a[0] == item.type) {
							item.type_name = a[1];
						}
					});
					this.pluginList.push(item);
				});
				this.total = res.counts;
			});
		},

		// 上下架
		upDown(e, plug_id) {
			let data = {
				is_show: e,
				plug_id: plug_id
			};
			this.$http(this.$ApiList.OutPlugin, data).then(res => {
				this.$layer.msg(res.datas);
				this.init();
			});
		},
		// 搜素
		goSearch(type, value) {
			this.searchContent = value;
			this.classSelect = type;
			this.init();
		},
		// 添加
		add() {
			this.title = '添加';
			this.submitType = 0;
			(this.addForm = {
				name: '',
				brief: '',
				is_show: 1,
				sort: 0,
				type: ''
			}),
				(this.addDialog = true);
			this.$nextTick(() => {
				this.$refs.addForm.clearValidate();
			});
		},
		// 编辑
		edit(content) {
			content.type = String(content.type);
			this.title = '编辑';
			this.submitType = 1;
			this.addForm = content;
			this.addDialog = true;
		},
		// 刷新
		refreshPage() {
			this.page = 1;
			this.status = 1;
			this.searchContent = '';
			this.init();
		},
		submit(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					// submitType 0新增 1编辑
					if (this.submitType == 0) {
						this.$http(this.$ApiList.AddPlugin, this.addForm).then(res => {
							this.$layer.msg(res.datas);
							this.addDialog = false;
							this.init();
						});
					} else {
						this.$http(this.$ApiList.UpPlugin, this.addForm).then(res => {
							this.$layer.msg(res.datas);
							this.addDialog = false;
							this.init();
						});
					}
				} else {
					this.$layer.msg('请填写完整信息后提交');
				}
			});
		},
		getTypeList() {
			this.$http(this.$ApiList.TypePlugin).then(res => {
				this.typeList = Object.entries(res.datas);
			});
		},
		setSelectValue(obj){
			const { value,type } = obj
			switch (type) {
				case 'status':
					this.status = value
					break;
				case 'order_by':
					this.order_by = value
					break
				case 'asc':
					this.asc = value
					break
				default:
					break;
			}
			this.init()
		}
	},
	created() {
		this.getTypeList();
		this.init();
	}
};
</script>
<style lang="scss">
.plugin_list {
}
</style>
